<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref} from 'vue';
import * as echarts from 'echarts';

// 假设你有一个方法来获取数据
const fetchData = async () => {
  // 这里模拟从后端获取数据
  return [
    {name: '河口镇', value1: 100, value2: 95, value3: 80},
    {name: '永平镇', value1: 95, value2: 80, value3: 75},
    {name: '石塘镇', value1: 80, value2: 75, value3: 65},
    {name: '鹅湖镇', value1: 75, value2: 65, value3: 60},
    {name: '湖坊镇', value1: 65, value2: 60, value3: 55},
    {name: '武夷山镇', value1: 60, value2: 55, value3: 50},
    {name: '汪二镇', value1: 55, value2: 50, value3: 45},
    {name: '葛仙山镇', value1: 50, value2: 45, value3: 40},
    {name: '陈坊乡', value1: 45, value2: 40, value3: 35},
    {name: '虹桥乡', value1: 40, value2: 35, value3: 30},
    {name: '新滩乡', value1: 35, value2: 30, value3: 25},
    {name: '稼轩乡', value1: 30, value2: 25, value3: 20},
    {name: '英将乡', value1: 25, value2: 20, value3: 15},
    {name: '紫溪乡', value1: 20, value2: 15, value3: 10},
    {name: '太源畲族乡', value1: 15, value2: 10, value3: 5},
    {name: '天柱山乡', value1: 10, value2: 5, value3: 0},
    {name: '篁碧畲族乡', value1: 5, value2: 0, value3: 0}
  ];
};

// 定义一个引用，用于引用图表容器的 DOM 元素
const chartRef = ref<HTMLElement | null>(null);

let chart: echarts.ECharts | null = null;  // ECharts 实例


// 定义一个异步函数来渲染柱状图
const renderBarChart = async () => {
  // 检查 chartRef 是否已经挂载到 DOM 上
  if (chartRef.value) {
    // 初始化 ECharts 实例
    chart = echarts.init(chartRef.value);

    // 获取数据
    const data = await fetchData();

    // 计算所有数据的最大值
    const maxDataValue = Math.max(
        ...data.flatMap(item => [item.value1, item.value2, item.value3])
    );
    const barWidth = '13%'; // 柱宽
    const barGap = '10%'; // 柱间距
    const distance = 1; // 标签距离
    // 定义三种颜色用于不同的系列
    const colors = ['#189cbb', '#83e0fc', '#23aecb'];

    // 定义图表的配置项
    const scale = 1;
    const option = {
      // 背景颜色设置为深色背景
      // backgroundColor: '#0E2A43',
      tooltip: {
        show: true, // 隐藏提示框
        trigger: 'axis', // 触发类型为坐标轴触发
        axisPointer: {
          type: 'shadow' // 坐标轴指示器类型为阴影
        }
      },
      legend: {
        data: ['生态物质产品', '生态调节产品', '生态文化产品'], // 图例数据
        align: 'left', // 图例对齐方式
        itemGap: 50, // 图例间隔
        right: '10%', // 图例位置
        y: '10%', // 图例位置
        icon: 'rect', // 图例图标形状
        itemWidth: 15 * scale, // 图例图形宽度
        itemHeight: 15 * scale, // 图例图形高度
        textStyle: {
          color: "#fff", // 图例文字颜色
          fontSize: 14 * scale // 图例文字大小
        },

      },
      grid: {
        left: '3%', // 网格左边距
        right: '4%', // 网格右边距
        bottom: '20px', // 网格下边距
        containLabel: true // 包含标签
      },
      xAxis: [{
        type: 'category', // 类目轴
        data: data.map(item => item.name), // 类目数据
        axisLabel: {
          padding: [15, 0, 0, 0], // 标签内边距
          color: "#fff", // 标签文字颜色
          fontSize: 14 * scale // 标签文字大小
        },
        axisTick: {
          inside: true, // 刻度线朝内
          length: 8 * scale, // 刻度线长度
          lineStyle: {
            color: colors[0] // 刻度线颜色
          }
        },
        axisLine: {
          lineStyle: {
            color: colors[0] // 轴线颜色
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(80,224,255,0.3)', // 分隔线颜色
            type: 'dashed' // 分隔线类型
          }
        }
      }],
      yAxis: [{
        // show: false,
        type: 'value', // 数值轴
        max: maxDataValue * 1.2, // 最大值
        axisLabel: {
          padding: [0, 15, 0, 0], // 标签内边距
          color: colors[0], // 标签文字颜色
          fontSize: 16 * scale // 标签文字大小
        },
        axisTick: {
          lineStyle: {
            color: colors[0] // 刻度线颜色
          }
        },
        axisLine: {
          lineStyle: {
            color: colors[0] // 轴线颜色
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(80,224,255,0.3)', // 分隔线颜色
            type: 'dashed' // 分隔线类型
          },
          show: false, // 不显示分隔线
        },
        name: '价值（万元）', // 轴名称
        nameTextStyle: {
          color: "#fff", // 轴名称颜色
          fontSize: 16 * scale, // 轴名称大小
          padding: [0, 0, 10, 0] // 轴名称内边距
        }
      }],
      series: [
        {
          name: '生态物质产品', // 系列名称
          type: 'bar', // 系列类型为柱状图
          stack: '生态物质产品', // 系列堆叠
          barWidth: barWidth, // 柱宽
          barGap: barGap, // 柱间距
          label: {
            show: false, // 显示标签
            position: "top", // 标签位置
            distance: distance, // 标签距离
            formatter: function (params: any) {
              return params.data.value; // 标签内容
            },
            color: "#dc0e0e", // 标签文字颜色
            fontSize: 14 * scale, // 标签文字大小
          },
          itemStyle: {
            color: 'rgba(94,218,255,0.4)', // 柱状图颜色
          },
          data: data.map(item => item.value1) // 数据
        },
        {
          name: '生态调节产品', // 系列名称
          type: 'bar', // 系列类型为柱状图
          stack: '生态调节产品', // 系列堆叠
          barWidth: barWidth, // 柱宽
          barGap: barGap, // 柱间距
          label: {
            show: false, // 显示标签
            position: "top", // 标签位置
            distance: distance, // 标签距离
            formatter: function (params: any) {
              return params.data.value; // 标签内容
            },
            color: "#2e8686", // 标签文字颜色
            fontSize: 14 * scale, // 标签文字大小
          },
          itemStyle: {
            color: 'rgba(20,124,146,0.4)', // 柱状图颜色
          },
          data: data.map(item => item.value2) // 数据
        },
        {
          name: '生态文化产品', // 系列名称
          type: 'bar', // 系列类型为柱状图
          stack: '生态文化产品', // 系列堆叠
          barWidth: barWidth, // 柱宽
          barGap: barGap, // 柱间距
          label: {
            show: false, // 显示标签
            position: "top", // 标签位置
            distance: distance, // 标签距离
            formatter: function (params: any) {
              return params.data.value; // 标签内容
            },
            color: "#dc0e0e", // 标签文字颜色
            fontSize: 14 * scale, // 标签文字大小
          },
          itemStyle: {
            color: 'rgba(9,149,124,0.4)', // 柱状图颜色
          },
          data: data.map(item => item.value3) // 数据
        }
      ]
    };

    // 设置图表的配置项
    chart.setOption(option);
  }
}

// 在组件挂载后执行
onMounted(() => {
  // 延迟初始化图表，以确保 DOM 元素已经渲染完成
  setTimeout(() => {
    renderBarChart();
  }, 200);
});

onBeforeUnmount(
    () => {
      // 在组件销毁前执行
      // 清理图表实例
      if (chart) {
        console.log('销毁图表实例-bar02');
        chart.dispose();
        chart = null;
      }
    }
)
</script>

<template>
  <!-- 定义图表容器，使用 ref 绑定到 chartRef 引用 -->
  <div ref="chartRef" style="width: 100%; height: 100%; "></div>
</template>

<style scoped>
/* 你可以根据需要添加样式 */
</style>
